<template>
	<div class="adSystemConfig" :style="{width:initWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				当前位置/系统配置/
				<span>广告系统配置</span>
			</div>
		</div>
		<div class="right_content">
			<div class="form">
				<div class="divider2"></div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline" :inline="true">
					<div class="import">
						<el-form-item label="游戏名称：" prop="region" :label-width="formLabelWidth">
							<el-select
							  v-model="ruleForm.region"
							  placeholder="请选择游戏" type="success">
								<el-option
							    v-for="item in options5"
							    :key="item.value"
							    :label="item.label"
							    :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="广告ID：" prop="id" :label-width="formLabelWidth">
							<el-input v-model.number="ruleForm.id"></el-input>
						</el-form-item>
						<el-form-item label="归属：" prop="affiliation" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.affiliation"></el-input>
						</el-form-item>
						<el-form-item label="活动名称：" prop="actName" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.actName"></el-input>
						</el-form-item>
						<el-form-item label="渠道名称：" prop="channelName" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.channelName"></el-input>
						</el-form-item>
						<el-form-item label="代理公司：" prop="agent" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.agent"></el-input>
						</el-form-item>
						<el-form-item label="平台：" prop="platform" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.platform"></el-input>
						</el-form-item>
						<el-form-item label="结算方式：" prop="paytype" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.paytype"></el-input>
						</el-form-item>
						<el-form-item label="广告位置：" prop="advPosition" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.advPosition"></el-input>
						</el-form-item>
					</div>
					<el-form-item class="conmit">
						<el-button type="primary" @click="submitForm('ruleForm')" icon="plus">立即添加</el-button>
						<el-button type="primary" @click="findForm()" icon="search">立即搜索</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
						<br>
						<span class="warning">（输入搜索条件，留空搜索全部！）</span>
					</el-form-item>
					<el-upload
					  class="upload-demo"
					  :action="SRC+'/advsysconfig/upload.do'"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :on-success="upload"
					  :file-list="fileList">
					  <el-button size="small" type="primary"><i class="el-icon-upload"></i>点击上传</el-button>
					</el-upload>
				</el-form>
				<div class="divider2"></div>
			</div>
			<div class="table">
				<template>
				  <el-table
					v-loading="loading"
					element-loading-text="拼命加载中"
				    :data="tableData"
				    border
				    :default-sort = "{prop: 'channelid', order: 'descending'}"
				    >
				    <el-table-column sortable align="center"
				        v-for="(col,key) in tableHead"
				        :prop="col.prop" :label="col.label" :key = 'key'>
				    </el-table-column>
				    <el-table-column label="操作" align="center" width="200">
						<template scope="scope">
							<el-button type="primary"
					      size="small"
					      @click="edit(scope.$index, scope.row)">修改</el-button>
							<el-button
					      size="small"
					      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				  </el-table>
				</template>
				<div class="block">
					<el-button type="primary" class="exportXLS" size="small" @click="excel('广告系统配置表')"><i class="iconfont">&#xe703;</i>&nbsp;导出EXCEL</el-button>
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal"></el-pagination>
				</div>
			</div>
		</div>
		<div class="revampForm" v-show="revampShow">
			<div class="revampChoose">
				<div class="vicp-close"  @click="revampShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<el-form :model="revampForm" :rules="revamp" ref="revampForm" label-width="115px" class="demo-ruleForm">
					<h5>修改枚举</h5>
					<el-form-item label="游戏名称：" prop="region">
						<el-select
						  v-model="ruleForm.region"
						  disabled
						  placeholder="请选择游戏" type="success">
							<el-option
						    v-for="item in options5"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="广告ID：" prop="id">
						<el-input v-model.number="revampForm.id" disabled></el-input>
					</el-form-item>
					<el-form-item label="归属：" prop="affiliation">
						<el-input v-model="revampForm.affiliation"></el-input>
					</el-form-item>
					<el-form-item label="活动名称：" prop="actName">
						<el-input v-model="revampForm.actName"></el-input>
					</el-form-item>
					<el-form-item label="渠道名称：" prop="channelName">
						<el-input v-model="revampForm.channelName"></el-input>
					</el-form-item>
					<el-form-item label="代理公司：" prop="agent">
						<el-input v-model="revampForm.agent"></el-input>
					</el-form-item>
					<el-form-item label="平台：" prop="platform">
						<el-input v-model="revampForm.platform"></el-input>
					</el-form-item>
					<el-form-item label="结算方式：" prop="paytype">
						<el-input v-model="revampForm.paytype"></el-input>
					</el-form-item>
					<el-form-item label="广告位置：" prop="advPosition">
						<el-input v-model="revampForm.advPosition"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="revamps('revampForm')">立即修改</el-button>
						<el-button @click="revampReset('revampForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="uploadForm" v-show="uploadShow">
			<div class="uploadChoose">
				<div class="vicp-close"  @click="uploadShow=false"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<div class="upload">
					<h5>上传文件</h5>
					<h6>说明：</h6>
					<ol>
						<li>上传的文件必须为Excel文件；</li>
						<li>文件内容不能有表头，必须直接是数据；</li>
						<li>数据共分为八列：广告Id(可为空，但要空出这列)、归属、活动名称、渠道名称、代理公司、平台、结算方式、广告位置</li>
					</ol>
					<p>示例（物品类型配置）如下：</p>
					<img src="./adUpload.jpg" width="354" alt="上传图片">
					<el-upload
					  class="upload-demo"
					  drag
					  action="https://jsonplaceholder.typicode.com/posts/"
					  multiple>
					  <i class="el-icon-upload"></i>
					  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
				</div>
			</div>
		</div>
		<a href="" download="广告系统配置表.xlsx" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./adSystemConfig.styl"></style>
<script src="./adSystemConfig.js"></script>